<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>jQuery Tablesorter select widget</title>
    
	<link rel="stylesheet" href="../css/style.css" type="text/css" media="print, projection, screen" />
	<link rel="stylesheet" href="../css/jquery.tablesorter.select.css" type="text/css" />
	
	<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.tablesorter.min.js"></script>
	<script type="text/javascript" src="../js/jquery.tablesorter.select.js"></script>
	<script type="text/javascript">
	
    $(window).load(function() {
    
        $("table#table1").tablesorter({
            widgets: [
                'select',
                'zebra'
            ]
        });
        
        $('table').bind('select.tablesorter.select', function(e, ts){
            alert(ts.selected.length +' rows selected.');
        });
        
    });
	
	</script>	
</head>

<body>
    <h1>Tablesorter select widget demo.</h1>
    <p>The following table demonstrates the jquery.tablesorter.filter plugin for for jQuery Plugin Tablesorter (<a href="http://tablesorter.com">http://tablesorter.com</a>)</p>
    
    <h2>Demo</h2>

    <table id="table1" class="tablesorter"> 
        <thead> 
            <tr>
                <th>Unicode<br />Codepos.</th> 
                <th>Zeichen</th> 
                <th>UTF-8<br />(hex.)</th> 
                <th>Name</th> 
                <th>Unicode 1.0-Zeichennamen (&uuml;berholt)</th> 
            </tr>
        </thead> 
        <tbody>
            <tr class="cev"> 
            <td class="cpt">U+0000</td><td class="charnodisplay">&nbsp;</td><td class="utf8">00</td><td class="name">&lt;control&gt;</td> 
            <td class="name">NULL</td> 
            </tr> 
            <tr class="cod"> 
            <td class="cpt">U+0001</td><td class="charnodisplay">&nbsp;</td><td class="utf8">01</td><td class="name">&lt;control&gt;</td> 
            <td class="name">START OF HEADING</td> 
            </tr> 
            <tr class="cev"> 
            <td class="cpt">U+0002</td><td class="charnodisplay">&nbsp;</td><td class="utf8">02</td><td class="name">&lt;control&gt;</td> 
            <td class="name">START OF TEXT</td> 
            </tr> 
            <tr class="cod"> 
            <td class="cpt">U+0003</td><td class="charnodisplay">&nbsp;</td><td class="utf8">03</td><td class="name">&lt;control&gt;</td> 
            <td class="name">END OF TEXT</td> 
            </tr> 
            <tr class="cev"> 
            <td class="cpt">U+0004</td><td class="charnodisplay">&nbsp;</td><td class="utf8">04</td><td class="name">&lt;control&gt;</td> 
            <td class="name">END OF TRANSMISSION</td> 
            </tr> 
        </tbody>
    </table>
    
    <p class="note">Note: Try to use the Shift or Ctrl Key to make multiple selections.</p>

    <h2>Source</h2>

    
    <pre>$("table").tablesorter({
    widgets: [
        'select',
    ]
});

$('table').bind('select.tablesorter.select', function(e, ts){
    alert(ts.selected.length +' rows selected.');
});</pre>
    
    <h2>Events</h2>
    <p>All events of tablesorter.extras are namespaced and follows this format [event type].tablesorter.[widget namespae]</p>
    <table class="tablesorter">
        <thead>
            <tr>
                <th>Event</th>
                <th>Type</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>select.tablesorter.select</td>
                <td>select</td>
                <td>
                    <p>This event is triggered on every selection. The event throws two parameters.</p>
                    <p>e: The event object</p>
                    <p>ts: Additional tablesorter.select values.
                    <pre>ts: {
    table: {HTML Element Object} The table.
    selected: {[HTML Element Object]} Currently selected table rows.
    elem: {HTML Element Object} Latest selected table row.
}</pre></p>
                    <pre>$('.selector').bind('select.tablesorter.select', function(e, ts){
    alert(ts.selected.length +' rows selected.');
});</pre>
                </td>
            </tr>
        </tbody>
    </table>


	</body>
</html>
